几款主流开源富文本编辑器对比 ​

富文本编辑器，对我们来说都不陌生，它的应用场景非常广泛，平时发个评论、写篇博客文章等都能见到它的身影。富文本编辑器，尤其是Web端的可见即所得（WYSIWYG）富文本编辑器，涉及到浏览器兼容性，要求支持的的功能比较多，因而具有较高的技术含量。无论是生产应用，还是研究学习，多关注下开源领域的富文本编辑器项目，都是有益的。

整体一览比较 ​

甄选了业界较为知名的几款开源富文本编辑项目作对比。

以上统计数据截止到 2023-10-10，排名不分先后

ckeditor5 ​

功能强大的富文本编辑器框架，具有模块化架构、现代集成和协作编辑等功能。

ckeditor5的开发语言：

（首次克隆默认分支，不安装依赖）代码仓库大小：627.8 MB

体验效果图：

优势：

• 是老牌的富文本编辑器了，前身是大名鼎鼎的FckEditor，拥有悠久的历史。
• 版本更新比较及时

缺陷：

• 问题数量较多（> 3000）
• 开源协议不友好，GPL协议 禁止 商用的

相关链接：

• 官网：https://ckeditor.com/ckeditor-5
• github：https://github.com/ckeditor/ckeditor5
• https://juejin.cn/post/6869207241719988237

quill ​

Quill是一个现代的WYSIWYG编辑器，具有兼容性和可扩展性。拥有强大的功能，网上介绍它的文章很多。从star数 和 NPM下载量两个维度来说，是当之无愧的NO 1.

开发语言：

（首次克隆默认分支，不安装依赖）代码仓库大小：21.4MB

优势：

• 标星 start 数量最多，可见深受广大开发者的喜爱
• 下载量非常多（> 100万），可见日常使用量非常大，应用广泛
• 兼容性好，对各个平台和浏览器支持度高
• 可拓展性高，适合二次开发

缺陷：

• 更新维护频率较低，已经 3 年不出新版本了

体验效果图：

• 官网：https://quilljs.com/
• github：https://github.com/quilljs/quill
• https://juejin.cn/post/6844904073620094990

tinymce ​

TinyMCE，具可定制性、可扩展性和灵活性的富文本编辑器，受到数百万开发人员的使用和信任，支持React, Vue和Angular。

开发语言：

（首次克隆默认分支，不安装依赖）代码仓库大小：113.4 MB

体验效果图：

优势：

• 功能丰富强大，支持内嵌表格
• 生态体系健全
• 可拓展、可定制化程度高
• 更新维护及时

缺陷：

• 安装包的体积较大
• 界面风格比较重金属（个人主观感受）

相关链接：

• 官网：https://www.tiny.cloud/
• github：https://github.com/tinymce/tinymce
• https://juejin.cn/post/7262588535340498999

tiptap ​

一个无头(不提供现成的视图界面)、框架无关、可扩展的富文本编辑器，基于ProseMirror 开发。

开发语言：

（首次克隆默认分支，不安装依赖）代码仓库大小：48.5 MB

体验效果图：

优势：

• 支持各种方式引入（React、Vue、Next、CDN等）
• 易于拓展，高度定制化的开发

缺陷：

• 不能拿来即用，需要二次开发
• 维护不是很及时，3年不发新版了

相关链接：

• 官网：https://tiptap.dev/installation
• github：https://github.com/ueberdosis/tiptap
• https://juejin.cn/post/7240833787159838775

slate ​

一个完全可定制的框架，用于构建富文本编辑器。

开发语言：

（首次克隆默认分支，不安装依赖）代码仓库大小：30.7 MB

体验效果图：

优势：

• 收获的 star 数较多，广受欢迎
• UI清新淡雅，颇具文艺风
• 和 React 技术栈衔接紧密

缺陷：

• 年轻的项目，处于beta版，不建议在生产环境使用
• 一些API还未最终确定，还在调整架构

相关链接：

• 官网：http://slatejs.org/
• github：https://github.com/ianstormtaylor/slate
• https://juejin.cn/post/6844903504478208007

jodit ​

Jodit Editor是一个用纯TypeScript编写的出色的所见即所得编辑器，不依赖额外的第三方库。包括一个文件编辑器和图像编辑器。

开发语言：

（首次克隆默认分支，不安装依赖）代码仓库大小：75.1 MB

体验效果图：

优势：

• 浏览器兼容性好，支持度高
• 版本更新快，及时维护
• 功能丰富

缺陷：

• 标星数量相对较少，群众基础薄弱
• 下载量不高，用的人比较少

相关链接：

• 官网：https://xdsoft.net/jodit/
• github：https://github.com/xdan/jodit
• https://xdan.github.io/jodit/

wangEditor ​

一款国产开源的优秀富文本编辑器，倾注了作者多年的心血。开箱即用，配置简单。

开发语言：

（首次克隆默认分支，不安装依赖）代码仓库大小：23.2 MB

体验效果图：

优势：

• 国产开源，中文文档，沟通方便
• 简洁易用，功能强大
• 支持Vue React等引入，不依赖三方库

缺陷：

• 作者已经停止维护了

相关链接：

• 官网：https://www.wangeditor.com/
• github：https://github.com/wangeditor-team/wangEditor
• https://juejin.cn/post/7272735633458413602

draft-js ​

基于 React 框架构建的富文本编辑器。

开发语言：

（首次克隆默认分支，不安装依赖）代码仓库大小：44.4 MB

体验效果：

优势：

• star数较高（22.5K）
• 提供的API丰富，可定制化程度高
• NPM下载量高（> 80万）

缺陷：

• 不支持 Typescript
• 已经 归档archived状态，宣布停止维护，逐步过渡到 Lexical 库

相关链接：

• 官网：https://draftjs.org/
• github：https://github.com/facebookarchive/draft-js
• https://juejin.cn/post/7110143808167215117

editor.js ​

一款块级样式的编辑器，输出干净的JSON格式数据。设计很独特，看下图。

开发语言：

（首次克隆默认分支，不安装依赖）代码仓库大小：25.1 MB

体验效果：

优势：

• 交互效果独特，设计新颖，别具一格👍🏻
• 界面清新淡雅，灵动
• 可插拔式的设计，每个block 都是一个插件

缺陷：

• 需要安装插件，来支持更多功能

相关链接：

• 官网：https://editorjs.io/
• github：https://github.com/codex-team/editor.js
• https://juejin.cn/post/7221525689857818680

lexical ​

Lexical是一个可扩展的JavaScript web富文本编辑器框架，强调可靠性、可访问性和性能。Lexical旨在提供一流的开发人员体验，因此可以轻松地构建原型和功能。结合高度可扩展的体系架构，Lexical能让开发人员创建独特的文本编辑体验，可以扩展大小和功能。

（首次克隆默认分支，不安装依赖）代码仓库大小：58.5 MB

开发语言：

体验效果图：

优势：

• 背靠Facebook这样的大厂，技术实力有保障
• 功能强大且丰富，内嵌表格、图表、多媒体资源等
• 有一个实时的调试器，展示文档的层级结构，很有特色👍🏻
• 对于一个新项目，star数 和 下载量都很高了

缺陷：

• 是一个新项目，还处于快速的版本迭代中

相关链接：

• 官网：
• github：https://github.com/facebook/lexical
• https://juejin.cn/post/7094265022620270606

vditor ​

Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。

开发语言：

代码仓库大小：44.2 MB

体验效果图：

优势：

• 国产开源，中文友好
• 支持的功能特性丰富
• 交互设计完善，丰富，支持分屏

缺陷：

• star数 和 下载量相对较少

相关链接：

• 官网：https://b3log.org/vditor/
• github：https://github.com/Vanessa219/vditor
• https://juejin.cn/post/7240838046789173306

prosemirror ​

用于构建Web富文本编辑器的工具库，并非一个开箱即用的编辑器，可以基于它来开发一款Rich Text Editor。代码组织方式，不同于上面罗列的项目，是分代码仓库的如下图所示。

• prosemirror-view: 是其核心模块，UI展示相关
• prosemirror-state: 核心模块，编辑器状态管理，跟踪当前文档和选择，并管理插件
• prosemirror-model: 定义编辑器的文档模型，用来描述编辑器内容的数据结构
• prosemirror-transform: 包括以记录和重放的方式修改文档的功能
• prosemirror-commands: 文档编辑的各种命令（加粗、斜体等）
• prosemirror-schema-basic: 定义基础的规范

（核心的UI模块：prosemirror-view）代码仓库大小：2.4MB

开发语言：

体验效果图：

优势：

• 很多编辑器都是基于它开发的
• NPM包的下载量相当高（> 80万）

缺陷：

• 无法开箱即用，适合研究、学习使用，或者二次开发

相关链接：

• 官网：https://prosemirror.net/
• github：https://github.com/prosemirror
• https://juejin.cn/post/7286642599326548031
• https://juejin.cn/post/6844903640889720846